import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Block, Image, View} from '@tarojs/components'
import './recording.scss'
import {
  INTERGRAL_RECORD, RESOURCE_URL,
} from "../../constants/api";
import {newHttp} from "../../utils/request";
import {user} from "../../utils/user.service";
import {vcmonitor} from "../../utils/tools";
import {getGlobalData} from "../../utils/global"
import GzhAuth from "../../components/gzh-auth/gzh-auth"

export default class Recording extends Component {
  state: {
    url: string
    intList: any
    pageSize: number
    loadMoreStatus: 'more' | 'noMore' | 'loading'
  } = {
    url: '',
    intList: [],
    pageSize: 10,
    loadMoreStatus: 'loading',
  }
  page = 1

  async UNSAFE_componentWillMount() {
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      Taro.showToast({
        title: '你还未登录，请登录',
        icon: 'none',
      })
      const timer = setTimeout(() => {
        clearTimeout(timer)
        Taro.switchTab({url: '/pages/my/index/index'})
      }, 1500)
      return
    }
    this.getList(this.page)
  }

  async componentDidShow() {
    vcmonitor(this);
  }

  async getList(start) {
    const {pageSize} = this.state
    const data = await newHttp.catchPost(INTERGRAL_RECORD, {start})
    if (data) {
      if (data.length < pageSize) {
        this.setState({loadMoreStatus: 'noMore', intList: data})
      } else {
        this.setState({loadMoreStatus: 'more', intList: data})
      }
      return data
    } else {
      return []
    }
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'})
      const old = this.state.intList
      this.page++
      const newData = await this.getList(this.page)
      this.setState({intList: [...old, ...newData]})
    }
  }

  render() {
    const {intList} = this.state
    return (
      <View className='recording-wrapper'>
        <GzhAuth />
        {intList && intList.length > 0 && intList.map((item, index) => <Block key={index}>
          <View className='recording-item'>
            <View className='title'>
              <View className='name'>{item.name}</View>
              <View className='time'>{item.add_date}</View>
            </View>
            <View className='info'>
              <View className='info-list'>
                <View className='lt'>获取{getGlobalData()}</View>
                <View className='rt'>{item.score}</View>
              </View>
              <View className='info-list'>
                <View className='lt'>{getGlobalData()}来源</View>
                <View className='rt'>{item.sourceName}</View>
              </View>
              <View className='info-list'>
                <View className='lt'>手机号码</View>
                <View className='rt'>{item.phone}</View>
              </View>
              <View className='info-list'>
                <View className='lt'>身份证号</View>
                <View className='rt'>{item.identify_num}</View>
              </View>
              <View className='info-list'>
                <View className='lt'>单位全称</View>
                <View className='rt'>{item.company}</View>
              </View>
            </View>
          </View>
        </Block>)}
        {intList.length <= 0 && <View className='listNull'>
          <Image src={`${RESOURCE_URL}/upload/images/20211112/1636708674979_153.png`} mode='widthFix' />
          <View className='text'>暂无数据</View>
        </View>}
      </View>
    );
  }
}
